<template>
    <div class="job-register-container">
        <el-container direction="horizontal">
            <el-main style="background-color:#F3F3F3;padding: 0px">
                <div class="company-register">
                    <!--注册信息的title-->
                    <div style="margin: 0 auto;width: 450px;align-content: center">
                        <h4 style="font-weight: normal;font-size: 20px;">求职者用户注册</h4>
                    </div>
                    <!--注册信息主体-->
                    <div style="margin: 0 auto;width: 450px;">
                        <el-form :model="registerInfoForm" :rules="dataRule" ref="registerDataInfo" @keyup.enter.native="register()">
                            <el-input type="hidden" v-model="registerInfoForm.companyOrPerson"></el-input>
                            <el-form-item prop="username">
                                <el-input v-model="registerInfoForm.username" placeholder="请输入用户名" style="width: 450px"></el-input>
                            </el-form-item>

                            <el-form-item prop="mobile">
                                <el-input v-model="registerInfoForm.mobile" placeholder="请输入手机号" style="width: 450px"></el-input>
                            </el-form-item>

                            <el-form-item prop="email">
                                <el-input v-model="registerInfoForm.email" placeholder="请输设置邮箱" style="width: 450px"></el-input>
                            </el-form-item>

                            <el-form-item prop="password">
                                <el-input type="password" v-model="registerInfoForm.password" placeholder="请输入密码" style="width: 450px"></el-input>
                            </el-form-item>

                            <el-form-item prop="repassword">
                                <el-input type="password" v-model="registerInfoForm.repassword" placeholder="请确认密码" style="width: 450px"></el-input>
                            </el-form-item>
                        </el-form>

                    </div>
                    <!--注册信息的底部-->
                    <div style="margin: 0 auto;width: 300px;font-size: 14px;">
                        <el-checkbox v-model="isCheck">
                            已阅读并同意
                            <el-link :underline="false" style="color: #409EFF">《用户协议》</el-link>
                            和
                            <el-link :underline="false" style="color: #409EFF">《政策隐私》</el-link>
                        </el-checkbox>
                    </div>
                    <!--注册按钮-->
                    <div style="margin: 0 auto;width: 325px;font-size: 14px;">
                        <el-button type="primary" size="midle" style="width: 330px;margin-top: 20px" @click="register()">立即注册</el-button>
                    </div>
                    <div style="margin: 0 auto;width: 150px;margin-top: 20px">
                        <span style="font-size: 13px;color: #C0C4CC">已有账号？</span>
                        <el-link style="font-size: 13px;color: #409EFF">
                            <router-link to="/home/loginJob">立即登录</router-link>
                        </el-link>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import userApi from "@/api/user";

    export default {
        name: "job-register",
        data(){

            var UserNameRegex = "^[a-z_A-Z0-9_-]{2,15}$"
            var validateUsername = (rule ,value,callback) => {
                if (value == ''){
                    callback(new Error('请输入用户名'));
                }else if (!value.match(UserNameRegex)){
                    callback(new Error('用户名长度6-15位包含大写或者小写或者数字'));
                }else{
                    callback();
                }
            }
            var phoneRegex = "0?(13|14|15|17|18|19)[0-9]{9}"
            //手机号校验
            var validateMobile = (rule, value, callback) => {
                console.log("value ==>", value)
                console.log("value.match(phoneRegex)" ,value.match(new RegExp(phoneRegex)))
                if (value === '') {
                    callback(new Error('请输入手机号'));
                }else if (!value.match(phoneRegex)){
                    callback(new Error("请输入正确格式的手机号"))
                }
                else {
                    callback();
                }
            };
            var emailRegex = "\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}"
            /*验证邮箱*/
            var validateEmail = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输邮箱信息'));
                }else if (!value.match(emailRegex)){
                    callback(new Error("请输入正确格式的邮箱"))
                }
                else {
                    callback();
                }
            };
            /*密码验证*/
            //var passwordRegex = "/[a-zA-Z0-9]{6-15}/g";
            var validatePassword = (rule, value, callback) => {
                console.log("value.length ===>",value.length)
                if (value === '') {
                    callback(new Error('请输密码信息'));
                }else if (value.length < 6){
                    callback(new Error("密码的长度不能小于6位"))
                }
                else {
                    callback();
                }
            };
            var repasswordValidate = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请重新输入密码信息'));
                }else if (value != this.registerInfoForm.password){
                    callback(new Error("两次输入的密码不一致"))
                }
                else {
                    callback();
                }
            };

            return{
                isCheck:false,
                registerInfoForm:{
                    username:'',        //用户名
                    password:'',        //密码
                    email: '' ,         //邮箱
                    mobile: '' ,        //手机号
                    repassword:'',      //密码重新校验
                    companyOrPerson:'2' //身份状态2代表是个人用户
                },
                dataRule: {
                    username: [
                        { validator: validateUsername, trigger: 'blur' },
                    ],
                    password: [
                        { validator: validatePassword, trigger: 'blur' }
                    ],
                    email: [
                        { validator: validateEmail, trigger: 'blur' }
                    ],
                    mobile: [
                        { validator: validateMobile, trigger: 'blur' }
                    ],
                    repassword: [
                        { validator: repasswordValidate, trigger: 'blur' }
                    ],
                },
            }
        },
        methods:{
            register(){

                if (this.registerInfoForm.username == ''){
                    this.$message({
                        type:'warning',
                        message:'请输入用户名'
                    })
                    return
                }
                if (this.registerInfoForm.mobile == ''){
                    this.$message({
                        type:'warning',
                        message:'请输入手机号'
                    })
                    return
                }
                if (this.registerInfoForm.email == ''){
                    this.$message({
                        type:'warning',
                        message:'请输入邮箱'
                    })
                    return
                }
                if (this.registerInfoForm.password == ''){
                    this.$message({
                        type:'warning',
                        message:'请输入密码'
                    })
                    return
                }
                if (this.registerInfoForm.password != this.registerInfoForm.repassword){
                    this.$message({
                        type:'warning',
                        message:'两次输入的密码不一致'
                    })
                    return
                }

                if (!this.isCheck){
                    this.$message({
                        type:'warning',
                        message:'请先勾选同意框'
                    })
                    return
                }

                userApi.userRegister(this.registerInfoForm)
                .then(response =>{
                    if (response.data.code === 0){
                        this.$message({
                            type:'success',
                            message:'用户注册成功'
                        })
                        this.$router.push("/home/loginJob")
                    }
                })
                .catch(error => {
                    new Promise.reject(error);
                })
            }
        }
    }
</script>

<style scoped>

</style>
